<template>
	<view class="" v-if="data.del != 1">
		<view class="fritem">
			<view class="l">
				<view class="mc">
					<text class="r10" @click="dataedtfn('mc')">{{ data.mc }}</text>
					<u-tag v-if="
              data.type == 0 ||
              data.type == 2 ||
              data.type == 5 ||
              data.type == 10
            " :text="fruser" type="primary" mode="dark" shape="circle" size="mini" />
				</view>
				<view class="u-flex pcs" v-if="station0falg">
					{{ fruser }}
					<text style="padding: 0 10rpx">|</text>
					{{ station.pcs }}
				</view>
				<view class="pcs" v-else>
					<text class="r10" @click="USearchfrfn()">{{ station.pcs }}</text>
					<template v-if="mode != 0">
						<u-tag :text="modaxs" type="primary" mode="dark" shape="circle" size="mini"
							@click="dataedtfn('mode')" />
						<text class="r10"></text>
					</template>
					<u-tag v-if="!disabled && StatFrfalgfn" text="删除" type="error" mode="dark" shape="circle"
						size="mini" @click="StatFredtplfn()" />
				</view>
			</view>
			<view class="r" @click="dataedtfn(statfrper)">
				{{
          item.mode == "2_2"
            ? `${data[statfrper] / 100}${$z.$t("元/度")}`
            : `${data[statfrper]}%`
        }}
			</view>
		</view>
		<u-modal :show="modalshow" :show-cancel-button="true" :show-title="false" @confirm="confirm" @cancel="cancel">
			<view class="modalinput">
				<u-input :focus="true" :placeholder="placeholder" v-model="modalvalue" />
			</view>
		</u-modal>
		<zmodal ref="zmodal"></zmodal>
		<u-select :mask-close-able="false" v-model="modeshow" :defaultValue="modedefaultValue" :list="options"
			@confirm="modeconfirm"></u-select>
	</view>
</template>
<script>
	export default {
		props: {
			station0falg: {
				typeof: Boolean,
				default: false,
			},
			item: {
				typeof: [Object, String, Number],
				default: () => {
					return {};
				},
			},
			usearchs: {
				typeof: [Object, String, Number],
				default: () => {
					return [];
				},
			},
			mode: {
				typeof: [String, Number],
				default: () => {
					return "";
				},
			},
			i: {
				typeof: [String, Number],
				default: () => {
					return "";
				},
			},
			statfrper: {
				typeof: [String, Number],
				default: () => {
					return "per";
				},
			},
			station: {
				typeof: [Object, String, Number],
				default: () => {
					return {};
				},
			},
			statfr: {
				typeof: [Object, String, Number],
				default: () => {
					return [];
				},
			},
			disabled: {
				typeof: Boolean,
				default: false,
			},
		},
		data() {
			return {
				modeshow: false,
				modalshow: false,
				placeholder: "",
				modalvalue: "",
				options: [{
						value: "1",
						label: this.$z.$t("电费分润"),
					},
					{
						value: "2",
						label: this.$z.$t("服务费分润"),
					},
					{
						value: "2_2",
						label: this.$z.$t("服务费分润固定金额"),
					},
					{
						value: "3",
						label: this.$z.$t("卡分润"),
					},
				],
				typepfrids: {
					0: this.$z.$t("代理商"),
					2: this.$z.$t("物业"),
					5: this.$z.$t("自定义"),
					8: this.$z.$t("一级分润方"),
					9: this.$z.$t("二级分润方"),
				},
				data: {},
				edtlx: "",
			};
		},
		watch: {
			item: {
				handler(newVal, oldVal) {
					let data = this.$u.deepClone(newVal);
					if (!data.mode) {
						data.mode = "0";
					}
					this.data = data;
				},
				deep: true,
				immediate: true,
			},
		},

		computed: {
			modedefaultValue() {
				let optioni = this.options.findIndex((e) => {
					return e.value == this.data.mode;
				});
				if (optioni == -1) {
					return;
				}
				return [Number(optioni)];
			},
			modaxs() {
				let options = [{
						value: "0",
						label: this.$z.$t("普通分润"),
					},
					{
						value: "1",
						label: this.$z.$t("电费分润"),
					},
					{
						value: "2",
						label: this.$z.$t("服务费分润"),
					},
					{
						value: "2_2",
						label: this.$z.$t("服务费分润固定金额"),
					},
					{
						value: "3",
						label: this.$z.$t("卡分润"),
					},
				];
				let r = options.find((e) => {
					return e.value == this.data.mode;
				});
				return r ? r.label : this.data.mode;
			},
			StatFrfalgfn() {
				if (this.item.frid.indexOf("new") >= 0) {
					return true;
				}
				if (this.item["type"] == "1") {
					return false;
				}
				return true;
			},
			fruser() {
				let p = this.item;
				if (p.pfrid == 0) {
					let dquUser = this.usearchs.find(function(e) {
						return e.frid == p.frid;
					});
					if (dquUser) {
						let mc = dquUser.uUser;
						if (dquUser.uxm) {
							mc += "_" + dquUser.uxm;
						}
						return mc;
					}

					return this.typepfrids[p.type] ?
						this.$z.$t("新") + this.typepfrids[p.type] :
						this.$z.$t("新代理商");
				}

				let dquUser = this.usearchs.find(function(e) {
					return e.frid == p.pfrid;
				});
				console.log(dquUser, "111111", this.usearchs);
				if (dquUser) {
					let mc = dquUser.uUser;
					if (dquUser.uxm) {
						mc += "_" + dquUser.uxm;
					}
					return mc;
				} else {
					return "";
				}
			},
		},
		methods: {
			async StatFredtplfn() {
				let USearchfr = await this.$z.request("/USearchfr", {
					frid: this.item.frid,
				});
				if (USearchfr.length == 1) {
					this.$refs.zmodal.init({
						content: this.$z.$t("请删除用户后，再删除分润！！"),
					});
					return;
				}
				// 请确认是否删除
				this.$refs.zmodal.init({
					showcancel: true,
					content: this.$z.$t("请确认是否删除?"),
					confirm: () => {
						let statfr = this.$u.deepClone(this.statfr);
						if (this.data.frid.indexOf("new") >= 0) {
							statfr.splice(this.i, 1);
						} else {
							statfr[this.i] = {
								...this.data,
								del: "1",
								per: "0",
							};
						}
						this.$emit("itemchange", statfr);
					},
				});
			},
			sybfb(data = this.statfr) {
				let r = 100;
				data = this.$u.deepClone(data);
				data = data.filter((e) => {
					return e.model != "2_2";
				});
				data.forEach((e) => {
					if (e.del != 1) {
						if (isNaN(parseFloat(e.per))) {
							e.per = 0;
						}
						r = Number(r).subtr(Number(e.per));
					}
				});
				return r;
			},
			async USearchfrfn() {
				if (this.disabled || !this.StatFrfalgfn) {
					return;
				}
				let types = {
					0: "0",
					1: "0",
					2: "11",
					5: "12",
				};
				let type = types[this.item["type"]];
				let USearchfr = await this.$z.request("/USearchfr", {
					frid: this.item.frid,
				});
				let str = USearchfr.length == 0 ? this.$z.$t("马上添加用户?") :
					this.$z.$t("修改用户?");
				let p = this.$u.$parent.call(this, "StatFrecharts");
				this.$refs.zmodal.init({
					showcancel: true,
					content: str,
					confirm: () => {
						let url = "";
						if (USearchfr.length == 0) {
							url =
								`/pages/USearch/uadd?pcs=${p.query.id}&frid=${this.item.frid}&utype=${type}`;
						} else {
							url =
								`/pages/USearch/USearch?pcs=${p.query.id}&frid=${this.item.frid}&utype=${type}&uUser=${USearchfr[0].uUser}`;
						}
						this.$z.gopage(url);
					},
				});
			},
			dataedtfn(lx) {
				if (this.disabled || !this.StatFrfalgfn) {
					return;
				}
				this.edtlx = lx;
				if (lx == "mc") {
					this.placeholder = this.data.mc;
					this.modalvalue = "";
					this.modalshow = true;
				} else if (lx == "per") {
					if (this.item.mode == "2_2") {
						this.placeholder = this.$z.$t("设置分润金额单位:元");
						this.modalvalue = "";
						this.modalshow = true;
						return;
					}
					let sybfb = this.sybfb(
						this.statfr.filter((e) => {
							if (e.frid == this.item.frid) {
								return false;
							}
							return e.mode == this.item.mode;
						})
					);

					this.placeholder = `${this.data.per}%,${this.$z.$t("可设置百分比为")}${sybfb}%.`;
					this.modalvalue = "";
					this.modalshow = true;
				} else if (lx == "mode") {
					this.modeshow = true;
				}
			},
			modeconfirm(e) {
				let statfr = this.$u.deepClone(this.statfr);
				this.data["mode"] = e[0].value;
				statfr[this.i] = this.data;
				this.$emit("itemchange", statfr);
			},
			cancel() {
				this.modalshow = false;
			},
			confirm() {
				this.modalshow = false;
				if (this.modalvalue == "") {
					return;
				}
				if (this.edtlx == "mc") {
					let statfr = this.$u.deepClone(this.statfr);
					this.data[this.edtlx] = this.modalvalue;
					statfr[this.i] = this.data;
					this.$emit("itemchange", statfr);
				} else if (this.edtlx == "per") {
					let statfr = this.$u.deepClone(this.statfr);
					if (this.item.mode == "2_2") {
						let v = parseInt(Number(this.modalvalue) * 100);

						this.data[this.edtlx] = v;
						statfr[this.i] = this.data;
					} else {
						if (this.modalvalue < 0 || this.modalvalue > 100) {
							this.$u.toast(this.$z.$t("百分百在0到100之间"));
							return;
						}
						this.data[this.edtlx] = this.modalvalue;
						statfr[this.i] = this.data;
						let pernum = this.sybfb(
							statfr.filter((e) => {
								return e.mode == this.data.mode;
							})
						);

						// 自动分配pernum
						if (pernum != 0) {
							statfr.forEach((e) => {
								if (e.frid == this.data.frid || e.type == 1 || e.type == 10) {
									return;
								}
								if (Number(pernum) == 0) {
									return;
								}
								if (e.mode == this.data.mode) {
									let per = Number(e.per) + Number(pernum);
									if (per < 0) {
										per = 0;
									}
									pernum = Number(pernum) + (Number(e.per) - per);

									e.per = String(per);
								}
							});
							this.$u.toast(this.$z.$t("电费已自动分配剩余百分比分润"));
						}
					}

					this.$emit("itemchange", statfr);
				}
			},
		},
	};
</script>
<style lang="scss">
	.r10 {
		padding-right: 12rpx;
	}

	.flex1 {
		width: 0;
		flex: 1;
	}

	.modalinput {
		padding: 20rpx;
	}

	.fritem {
		position: relative;
		padding: 22rpx 30rpx;
		display: flex;
		align-items: center;

		.l {
			width: 0;
			flex: 1;

			.mc {
				line-height: 50rpx;
				display: flex;
				align-items: center;
			}

			.pcs {
				line-height: 50rpx;
				display: flex;
				align-items: center;
				color: #8f8f94;
			}
		}

		.r {
			font-size: 40rpx;
			font-weight: bold;
			color: #2093f5;
		}

		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 1px;
			content: "";
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #eeeeee;
		}
	}
</style>